<template>
    <div>
        <el-dialog title="设备详情" :visible.sync="dialogViewVisible" width="60%" :show-close="false"
            :close-on-click-modal="false" style="height: 100%;" custom-class="customclassdialog">
            <el-form :model="form" style="max-height: 20%;overflow-y: auto;"
                :style="'max-height:' + windowHeight / 2 + 'px;'">
                <el-row>
                    <el-col>
                        <el-row>
                            <!-- <el-col :span="12">
                        <el-form-item label="设备图片:" :label-width="formLabelWidth">
                            <el-image style="width: 100%;" :src="form.powerstationpicture"
                                :preview-src-list="[form.powerstationpicture]">
                            </el-image>
                        </el-form-item>
                    </el-col> -->
                            <el-col style="padding: 0 0 6px 0;font-size: 16px;">
                                基础信息
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="设备编码:" :label-width="formLabelWidth">
                                    {{ form.equ_no }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属电站:" :label-width="formLabelWidth">
                                    {{ form.base_station.name }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属区域:" :label-width="formLabelWidth">
                                    {{ form.region.name }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="设备状态:" :label-width="formLabelWidth">
                                    {{ form.status_name }}
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <el-form-item label="使用时长:" :label-width="formLabelWidth">
                                    {{ form.equipmentduration }}
                                </el-form-item>
                            </el-col> -->
                            <!-- <el-col :span="8">
                                <el-form-item label="备注:" :label-width="formLabelWidth">
                                    {{ form.remark }}
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </el-col>
                    <el-col style="padding: 0 0 6px 0;font-size: 16px;" v-if="form.is_warn == 1">
                        报警信息
                    </el-col>
                    <el-col v-if="form.is_warn == 1">
                        <el-table :data="warn_data" border style="width: 100%;" height="300px" v-loading="loading"
                            element-loading-text="Loading..." element-loading-spinner="el-icon-loading">
                            <el-table-column type="index" label="序号" width="50" align="center">
                            </el-table-column>
                            
                            <el-table-column label="报警编号" min-width="80" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.warn_no }}
                                </template>
                            </el-table-column>
                            <el-table-column label="报警说明" min-width="80" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.warn_des }}
                                </template>
                            </el-table-column>
                            <el-table-column label="处理方式" min-width="240" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.handling_method }}
                                </template>
                            </el-table-column>
                            <el-table-column label="报警时间" min-width="100" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.created_at }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getequshow } from '@/api/equipment'
export default {
    name: 'WorkspaceJsonViewcomponents',
    props: {
        optionVal: {
            type: Object
        },
        dialogViewVisible: {
            type: Boolean
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = JSON.parse(JSON.stringify(ne))
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            formLabelWidth: '100px',
            form: {},
            srcList: [],
            windowHeight: 0,
            warn_data: [],
            loading:false
        };
    },
    mounted() {
        this.windowHeight = document.body.clientHeight;
        if (this.form.is_warn == 1) {
            this.getshow()
        }
    },

    methods: {
        getshow() {
            let data = {}
            data.id = this.form.id
            this.loading = true
            getequshow(data).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.warn_data = res.data.warn_data
                    this.loading = false
                }

            })
            return
        },
        cancel() {
            this.$emit('viewHeld', false);
        }
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }</style>